<template>
  <Modal @close="$emit('close')" class="com-modal-alert" @touchstart.stop.prevent.self="">
    <div class="com-alert">
      <div class="main">
        <slot name="title">
          <div class="title" v-if="title"><span>{{title}}</span></div>
        </slot>
        <slot name="content">
          <p class="content" v-if="content" v-html="content"></p>
        </slot>
      </div>
      <slot name="footer">
        <div class="btn-group">
          <a class="btn" @click="clickHandle('cancel')" v-if="cancel">{{cancelText}}</a>
          <a class="btn" @click="clickHandle('ok')">{{okText}}</a>
        </div>
      </slot>
    </div>
  </Modal>
</template>

<script>
/**
 * list 格式
 * {
 *  label:'xxx',
 *  value:1,
 * }
 */
import Modal from '~/components/Modal'
export default {
  components:{
    Modal,
  },
  props:{
    title:{
      type:String,
      default:'',
    },
    content:{
      default:'',
    },
    cancel:{
      default:false
    },
    cancelText:{
      default:'取消'
    },
    okText:{
      default:'确定'
    }
  },
  data(){
    return {
      selected:'',
    }
  },
  methods:{
    clickHandle(type){
      this.$emit(type);
      this.$emit('close');
    }
  }
}
</script>

<style lang="less" scoped>
.com-modal-alert {
  display: flex;
  justify-content: center;
  align-items: center;
}
.com-alert {
  width:544px;
  border-radius: 20px;
  background-color:#fff;

  .main {
    padding:60px 40px 40px;
    text-align: center;
  }

  .title {
    font-size:34px;
    color:#292929;
    line-height: 1.2;
  }

  .content {
    font-size:26px;
    color:#999;
    margin-top:20px;
  }
  .btn-group {
    display: flex;
    height:88px;
    border-top:1px solid #ededf0;
    .btn {
      & + .btn {
        border-left:1px solid #ededf0;
      }
      display: flex;
      justify-content: center;
      align-items: center;
      flex:1;
      font-size:34px;
      color:#2086f9;
    }
  }
}
</style>
